<template>
  <div>
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item>
        <el-input v-model="formInline.title" placeholder="商品名称" style="width: 300px;height:44px;"></el-input>
      </el-form-item>
      <el-form-item>
        <el-input v-model="formInline.fetch_code" placeholder="商品编码" style="width: 300px;height:44px;"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button
          style="color:black;background:#F7F8FA;border-radius:30px;border:0;border:1px solid #CED3DE"
          @click="onClear"
        >清空</el-button>
        <el-button
          type="primary"
          @click="onSearch"
          style="color:white;background:#2974FF;border-radius:30px;border:0"
        >搜索</el-button>
      </el-form-item>
    </el-form>
    <el-table
      :data="tableData"
      style="width: 100%"
      row-style="height: 72px;"
      :header-cell-style="{fontSize: '14px', backgroundColor: '#F6F6F6',borderBottom:'none' }"
    >
      <el-table-column prop="title" label="商品名称" ></el-table-column>
      <el-table-column prop="fetch_code" label="商品编号" ></el-table-column>
      <el-table-column prop="create_page_time"  label="发布时间"></el-table-column>
      <el-table-column label="商品屏蔽" >
        <template slot-scope="scope">
          <el-switch
            v-model="!!scope.row.shield_id"
            @change="(value)=>setShield(value,scope.row)"></el-switch>
        </template>
      </el-table-column>
    </el-table>

  </div>
</template>
<script>
export default {
  name: "shieldList",
  data() {
    return {
      formInline: {
        title: "",
        fetch_code: ""
      },
      tableData: [],
      pageParams: { page: 1, page_size: 10, total: 0 }
      
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    setShield(value, row) {
    let shop_id = JSON.parse(localStorage.getItem("SHOP")).shop_id;
      this.axios
        .post(`/api/plan-market/mini-store/pages/shield?page_id=${row.id}&is_shield=${value?'1':'2'}&shop_id=${shop_id}`)
        .then(response => {
          if (response.data.msg.code == 0) {
            this.$message.success("设置成功");
            this.getList();
          } else {
            this.$message.error(response.data.msg.info);
          }
        })
        .catch(err => {});
    },
    onClear() {
      this.formInline = {};
      // this.pageParams = { ...this.pageParams, ...this.formInline };
      this.getList();
    },
    onSearch() {
      // this.pageParams = { ...this.pageParams, ...this.formInline };
      this.getList();
    },

    getList() {
      let shop_id = JSON.parse(localStorage.getItem("SHOP")).shop_id;
      this.axios
        .get(`/api/plan-market/web/mini-store/pages`, {
          params: {
            shop_id: shop_id,
            flag: "admin",
            ...this.pageParams,
            ...this.formInline
          }
        })
        .then(response => {
          if (response.data.msg.code == 0) {
            this.tableData = response.data.data
          } else {
            this.$message.error(response.data.msg.info);
          }
        });
    },

  }
};
</script>
<style scoped lang="scss">

/deep/ .el-table__header-wrapper{
  border-radius: 12px;
}
/deep/ .el-input .el-input__inner {
  border-radius: 12px;
  border: 0;
  background: #f3f5f8;
}
/deep/ .el-pagination button, .el-pagination span:not([class*=suffix]) {
  width: 80px;
  height: 40px;
  border-radius: 20px !important;
}

</style>